<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Color Blocks - App Inventor for Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c2 {border-width:0}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Learn about App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">About</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Learn</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Forum</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">My Projects</a><div>(coming soon)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Learn</a> &gt; <a href="../../../learn/reference/index.html">Reference</a> &gt; Color Blocks &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Color Blocks
              </h1>
              <p>
                The Blocks Editor Colors drawer contains several blocks corresponding to commonly used colors. You can plug these into the sockets for blocks that require colors, such as setting the text color or the background color of a component. These same colors can also be selected from the color dropdown lists in the Designer's Properties panel.
              </p>
              <h3>
                Making your own colors
              </h3>
              <p>
                Colors in App Inventor are encoded as numbers, as you can see if you print a color block. For example, the color blue is the large negative number −16776961. If you know the secret to encoding colors, you don't need to be restricted to App Inventor's built-in colors. You can put any color at all into your apps.
              </p>
              <p>
                Colors are created using four numbers, each running from 0 through 255. The first three numbers signify the amount of red, green, and blue in the color. You can find color charts on the Web that give the <em>R</em>, <em>G</em>, <em>B</em> specifications for may colors, or you can experiment with your own <em>R</em>, <em>G</em>, <em>B</em> mixtures. The fourth number specifies <em>opacity</em> which comes into play when regions overlap. Opacity 255 is fully opaque: the color will completely block out anything under it. Opacity 0 is fully transparent: you won't even see the color on the screen. Intermediate values determine how much the underlying screen will show though.
              </p>
              <p>
                To get a color number for App Inventor, combine the four numbers according to the following algorithm:
              </p>
              <ol>
                <li>Start with the opacity.
                </li>
                <li>Multiply this by 256 and add <em>R</em>.
                </li>
                <li>Multiply the result by 256 and add <em>G</em>.
                </li>
                <li>Multiply the result by 256 and add <em>B</em>.
                </li>
                <li>Take the result and subtract 16<sup>8</sup> = 4294967296
                </li>
                <li>The resulting (negative) number is what you use for App Inventor.
                </li>
              </ol>
              <p>
                As an example, the <em>R</em>, <em>G</em>, <em>B</em> values for a deep shade of purple are <em>R</em> = 160, <em>G</em> = 32, <em>B</em> = 240. Applying the algorithm to these values, with an opacity of 255, gives −6283024. If you set the background color of a canvas to −6283024, you'll see a purple patch on the screen.
              </p>
              <p>
                <a href="colorchart.html">Here is a chart</a> that gives the numbers for a variety of colors.
              </p>
              <p>
                And here's a blocks program that computes the color number given <em>R</em>, <em>G</em>, and <em>B</em>. The opacity is fixed ar 255, but you can change that by changing the global variable.
              </p>
              <div class="imagecontainer">
                <img alt="" src="images/colorNumber.png" width="735">
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/" rel="license"><img alt="Creative Commons License" class="c2" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              This work is licensed under a <a href="http://creativecommons.org/licenses/by/3.0/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              The original work by Google has been modified<br>
              <!-- The modified work was translated from English to [language]<br> -->
              <a href="../../../about/index.html">About</a> | <a href="../../../about/privacy.html">Privacy</a> | <a href="../../../about/termsofservice.html">Terms</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
